<template>
	<div>
    <el-form class="form-container" :model="postForm" :rules="rules" v-loading="formLoading" ref="postForm" label-width="200px" label-position="right">
      <el-form-item label="默认用户数：" prop="initUsersNum">
        <el-input v-model="postForm.initUsersNum" placeholder="请输入默认用户数" style="width: 400px"></el-input>
        <span class="color666">用于升级会员页面累计学员数量的展示(展示数据=默认用户数+实际用户数)</span>
      </el-form-item>
      <el-form-item label="vip价格描述：">
        <el-input v-model="postForm.vipDesc" placeholder="请输入vip价格描述" style="width: 400px"></el-input>
        <span  class="color666">用于升级会员页面对vip价格文字描述</span>
      </el-form-item>
      <el-form-item label="课程链接：">
        <el-input v-model="postForm.courseLink" placeholder="请输入课程链接" style="width: 400px"></el-input>
        <span  class="color666">推荐课程(升级后的VIP/SVIP 点击‘立即学习’会跳到此课程详情页)</span>
      </el-form-item>
      <el-form-item label="页面内容：">
        <p  class="color666">此内容会在升级页面展示，建议单张图片宽750px,高度范围50~1200px,大小不能超过3M</p>
        <tinymce :height="300" v-model="postForm.pageContent" style="width: 80%"></tinymce>
      </el-form-item>
      <el-form-item v-if="permission == 3" style="padding: 10px 0">
        <el-button type="primary" v-loading="btnLoading" icon="el-icon-check" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
	</div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { getUpgrateVipSetting, saveUpgrateVipSetting } from '@/api/systemManage'
import { shopManage_systemManage } from '@/utils/permission'
const postForm = {
  initUsersNum: null,
  vipDesc: null,
  courseLink: null,
  pageContent: null
}

const validateNumber = (rule, value, callback) => {
  if (value && isNaN(value)) {
    callback('请输入正确的数值')
  } else {
    if (value < 0) {
      callback('请输入正确的数值')
    }
    callback()
  }
}

const rules = {
  initUsersNum: [{ validator: validateNumber, trigger: 'blur' }]
}

export default {
  name: 'upgrateVip',
  components: { Tinymce },
  data() {
    return {
      permission: 3,
      postForm: Object.assign({}, postForm),
      rules,
      formLoading: false,
      btnLoading: false
    }
  },
  created() {
    this.getModelPermission()
    this.initData()
  },
  methods: {
    getModelPermission() {
      this.permission = shopManage_systemManage()
    },
    initData() {
      getUpgrateVipSetting().then(res => {
        if (res.data.data) {
          this.postForm = res.data.data
        }
      }).catch(err => {
        console.log(err)
      })
    },
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.btnLoading = true
          this.formLoading = true
          saveUpgrateVipSetting(this.postForm).then(res => {
            this.btnLoading = false
            this.formLoading = false
            this.$message.success('保存成功')
          }).catch(err => {
            this.btnLoading = false
            this.formLoading = false
            console.log(err)
          })
        } else {
          this.btnLoading = false
          this.formLoading = false
          console.log('error submit!')
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
  .color666 {
    color: #666;
    font-size: 12px;
    padding-left: 10px;
  }
  p{
    margin: 0;
  }
</style>
